<template>
    <div class="address-add" :style="style">
        <input-item text-left="收货人名称"
                    text-holder="点击输入"
                    :text-default="receiver"
                    @getText="getReceiver"
                    @blur="receiverVerify"/>
        <div class="line"></div>
        <input-item text-left="手机号"
                    text-holder="点击输入"
                    :text-default="phone"
                    :isNumber="isNumber"
                    @getText="getPhone"
                    @blur="phoneVerify"
        />
        <div class="line"></div>
        <div class="area">
            <div class="line"></div>
            <input-item text-left="所在地区"
                        text-holder="省/市/区"
                        :text-default="getChooseArea"
                        :isDisabled="isDisabled"
                        @click="chooseArea"
            />
            <area-choose-item num="3" ref="areashow" v-on:getArea="getAreaData"/>
        </div>
        <div class="line"></div>
        <input-item text-left="详细地址"
                    text-holder="点击输入"
                    :text-default="detail"
                    @getText="getDetail"
                    @blur="detailVerify"
        />
        <div class="line"></div>
        <div class="confirm" @click="addressConfirm">确认地址</div>
    </div>
</template>

<script>
    import API from '../../../request/api';
    import InputItem from "@/components/common/input-item";
    import AreaChooseItem from "@/components/common/area-choose-item";
    import {Toast} from 'vant';

    const HEIGHT = document.documentElement.clientHeight + 'px';
    export default {
        components: {
            AreaChooseItem,
            InputItem
        },
        name: "address-edit",
        data() {
            return {
                receiver: '',
                phone: '',
                area: {},
                detail: '',
                verifyFail: {}, // 填写结果验证失败 receiver: true--为失败
                isNumber: true,
                isDisabled: true,
                style: {
                    height: HEIGHT
                }
            };
        },
        created() {
            this.getAddressList();
        },
        computed: {
            getChooseArea() {
                let areaShow = '';
                if (this.area.province) {
                    areaShow = this.area.province.name + this.area.city.name + this.area.county.name;
                }
                return areaShow;
            }
        },
        methods: {
            getAddressList() {
                // 获取 地址列表
                this.request.get(API.getAddressList, {
                    id: this.$route.query.id
                }).then((result) => {
                    if (result.id) {
                        this.receiver = result.name,
                            this.phone = result.phone,
                            this.area = {
                                province: {
                                    name: result.province,
                                    id: result.province_id
                                },
                                city: {
                                    name: result.city,
                                    id: result.city_id
                                },
                                county: {
                                    name: result.county,
                                    id: result.county_id
                                }

                            },
                            this.detail = result.address;
                    }
                    console.log('getAddressList-result', result);
                }).catch((err) => {
                    this.$toast.fail(err);
                });
            },
            getReceiver(receiver) {
                this.receiver = receiver;
            },
            getPhone(phone) {
                this.phone = phone;
            },
            getDetail(detail) {
                this.detail = detail;
            },
            receiverVerify(receiver) {
                let isCh = isChinese(receiver);
                console.log('isChinese:', isCh);
                if (isCh) {
                    this.receiver = receiver;
                    this.verifyFail.receiver = false;
                } else {
                    this.$toast({
                        message: '请填写正确的收货人!',
                        duration: 500
                    });
                    this.verifyFail.receiver = true;
                    // this.receiver = '';
                }
            },
            phoneVerify(phone) {
                let isPhone = isMobile(phone);
                console.log('isPhone:', isPhone);
                if (isPhone) {
                    this.phone = phone;
                    this.verifyFail.phone = false;
                } else {
                    this.$toast({
                        message: '手机号码不正确!',
                        duration: 500
                    });
                    this.verifyFail.phone = true;
                }
            },
            chooseArea() {
                this.$refs.areashow.changeShow();
            },
            getAreaData(data) {
                this.area = data;
            },
            detailVerify(data) {
                let isDe = detailAddress(data);
                if (isDe && data.length >= 5) {
                    this.detail = data;
                    this.verifyFail.detail = false;
                } else {
                    this.verifyFail.detail = true;
                    this.$toast({
                        message: '详细地址长度不小于5且不包括特殊字符',
                        duration: 1000
                    });
                }
            },
            addressConfirm() {
                let data = {};
                if (this.verifyFail.receiver || this.receiver === '') {
                    Toast('请填写正确的收货人');
                } else if (this.verifyFail.phone || this.phone === '') {
                    Toast('请填写正确的手机号');
                } else if (this.verifyFail.detail || this.detail === '') {
                    Toast('详细地址长度不小于5且不包括特殊字符');
                } else if ((JSON.stringify(this.area)) === '{}') {
                    Toast('请选择所在地区');
                } else {
                    data.id = this.$route.query.id;
                    data.province = this.area.province.id;
                    data.city = this.area.city.id;
                    data.county = this.area.county.id;
                    data.address = this.detail;
                    data.name = this.receiver;
                    data.phone = this.phone;
                    data.default = 0;
                    console.log('address', data);
                    // 添加收货地址
                    this.request.post(API.addressEdit, data).then((result) => {
                        console.log('resccc', result, this.$route.query.direct);
                        if (this.$route.query.direct) {
                            this.$router.replace(this.$route.query.direct);
                        } else {
                            this.$router.replace('address-list');
                        }
                    }).catch((err) => {
                        this.$toast.fail(err);
                    });
                }
            }

        },
    };

    // 验证是否含有特殊符号
    function isChinese(str) {
        let regu = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
        let re = new RegExp(regu);
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }

    // 详细地址正则
    function detailAddress(str) {
        let regu = /^[a-zA-Z0-9_\u4e00-\u9fa5]+[^;=?+$\x22]+$/;
        let re = new RegExp(regu);
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }

    // 验证手机号码
    function isMobile(s) {
        let regu = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;// 手机正则
        if (regu.test(s)) {
            return true;
        } else {
            return false;
        }
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .address-add {
        width 100%
    }

    .line {
        position relative
        line()
    }

    .confirm {
        position relative
        top middleMargin
        big-solid()
        margin auto
    }
</style>